<!--
 * @Descripttion:
 * @Author: xiao li
 * @Date: 2020-10-20 11:31:19
 * @LastEditors: xiao li
 * @LastEditTime: 2020-10-20 18:06:13
-->
<template>
  <div>
    <div class="pd-lg fill-base">
      <div class="new-list">
        <div class="normal-list pl-md pr-md" style="color: #d65353">
          <div class="flex-1 f-paragraph">{{ o.data.title || '新人专区' }}</div>
          <div class="f-caption">{{ o.data.more || '更多低价商品' }}</div>
          <div class="iconfont iconright" style="font-size: 12px"></div>
        </div>
        <div class="flex-warp pl-md">
          <div
            class="fill-base new-list-item mr-sm"
            :class="[{ 'b-1px-t': index !== 0 }]"
            v-for="(item, index) in 4"
            :key="index"
          >
            <img class="avatar" :src="image" />
            <div class="f-icontext c-title ellipsis pd-sm pt-md">菜品名称</div>
            <div class="flex-y-center pl-sm">
              <div class="flex-y-baseline f-icontext c-warning">
                ¥
                <div class="f-paragraph">88</div>
                <div class="f-icontext c-caption text-delete ml-md">¥98</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="fill-body space-lg"></div>
  </div>
</template>

<script>
export default {
  name: 'restaurantNewList',
  props: {
    o: Object,
    isMyGoods: false
  },
  data () {
    return {
      primaryColor: '#19c865',
      image: 'https://lbqny.migugu.com/admin/diy/default.png'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.new-list {
  width: 343px;
  height: 199px;
  background: #fff5f5;
}

.normal-list {
  display: flex;
  align-items: center;
  height: 50px;
  line-height: 1;
}
.new-list-item {
  width: 77px;
  height: 133px;
  border-radius: 4px;
  overflow: hidden;
}
.avatar {
  width: 77px;
  height: 77px;
}
</style>
